<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .login{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 200px;
            margin-left: -200px;
            margin-top: -100px;
            background-color: #eeeeee;
            z-index: 10;
        }
           .register{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 300px;
            margin-left: -200px;
            margin-top: -150px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position:fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 8;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="login">
        <h1 style="text-align: center">登录</h1>
        <form action="/login/" method="POST">
            <p style="text-align: center">
                <input type="text" name="user" placeholder="请输入用户名">
            </p>
            <p style="text-align: center;">
                <input type="text" name="pwd" placeholder="请输入密码">
            </p>

            <div style="text-align: center;display: block">
                <input type="submit" value="登录">
                <input id="register" type="button" value="注册">
            </div>
        </form>
    </div>

    <div class="register hide">
        <h1 style="text-align: center">注册</h1>
        <form action="/register/" method="POST">
            <p style="text-align: center">
                <input id="username" type="text" name="username" placeholder="请输入用户名">
            </p>
            <p style="text-align: center;">
                <input id="password" type="text" name="password" placeholder="请输入密码">
            </p>
            <p style="text-align: center">
                <input id="password2" type="text" name="password2" placeholder="请确认密码">
            </p>

            <div style="text-align: center;display: block">
                <a id="ajax_register" href="">注册</a>
{#                <input id="ajax_register" type="submit" value="注册">#}
                <input id="cancel" type="button" value="取消">
                <span id="err_msg" style="color: red"></span>

            </div>
        </form>
    </div>

    <div class="shadow hide"></div>

    <script src="/static/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            $('#register').click(function () {
                $('.shadow, .register').removeClass('hide');
                $('.login').addClass('hide');
            });

            $('#cancel').click(function () {
{#                $('.shadow, .register').addClass('hide');#}
{#                $('.login').removeClass('hide');#}
            });

            $('#ajax_register').click(function () {
                $.ajax({
                    url: '/test_ajax/',
                    type: 'POST',
                    data: {'username':$('#username').val(),'password':$('#password').val(),'password2':$('#password2').val()},
                    success: function(data){
                        var obj = JSON.parse(data);
                        if(obj.status){
                            location.reload()
                        }else{
                            $('#err_msg').text(obj.error);

                        }
                    }
                })
            });

        })

    </script>
</body>
</html>